<script setup name="Frame">

import {ref, computed, onMounted} from 'vue'
import {
    Expand,
    Fold,
    Refrigerator
} from '@element-plus/icons-vue'

import {useAuthStore} from "@/stores/auth"
import {useRouter} from 'vue-router'
import {reactive } from 'vue';

import authHttp from '@/api/authHttp';
import { ElMessage } from 'element-plus';

import MyAbsent from "@/views/absent/MyAbsent.vue"
import SubAbsent from "@/views/absent/SubAbsent.vue"

import routes from "@/router/frame"

const authStore = useAuthStore()
const router = useRouter()

let displayUser = reactive({
    department: {},
    realname: ""
})

let defaultActive = ref("home")

let isCollapse = ref(false)
let dialogFormVisible = ref(false)
let formLabelWidth = '140px'
let resetPwdForm = reactive({
    oldpwwd:"",
    pwd1:"",
    pwd2:"",
})

onMounted(()=>{
    defaultActive.value = router.currentRoute.value.name

    displayUser.department = authStore.user.department
    displayUser.realname = authStore.user.realname
}
)

let formTag = ref()

let rules = reactive({
    oldpwwd: [
    { required: true, message: '请输入旧密码！', trigger: 'blur' },
    { min: 3, max: 20, message: '密码长度需要在6-20范围内', trigger: 'blur' },
    ],
    pwd1: [
    { required: true, message: '请输入新密码！', trigger: 'blur' },
    { min: 3, max: 20, message: '密码长度需要在6-20范围内', trigger: 'blur' },
    ],
    pwd2: [
    { required: true, message: '请再次输入新密码！', trigger: 'blur' },
    { min: 3, max: 20, message: '密码长度需要在6-20范围内', trigger: 'blur' },
    ],
})

let asideWidth = computed(() => {
    if (isCollapse.value) {
        return "64px"
    } else {
        return "250px"
    }
})

const onCollapseAside = () => {
    isCollapse.value = !isCollapse.value
}

//退出
const onExit = ()=>{
    authStore.clearUserToken()
    router.push({name:'login'})
}

const onSubmit = ()=>{
    formTag.value.validate(async (valid, fields)=>{
        if(valid){
            try{
                await authHttp.resetPwd(resetPwdForm.oldpwwd, resetPwdForm.pwd1, resetPwdForm.pwd2)
                ElMessage.success("密码修改成功!")
                dialogFormVisible.value = false
            }catch(detail){
                ElMessage.error(detail)
            }
        }else{
            ElMessage.info('请按要求填写字段！')
        }
    })
    console.log('点击了提交！');
}


const onControlResetPwdDialog = ()=>{
    resetPwdForm.oldpwwd = ''
    resetPwdForm.pwd1 = ''
    resetPwdForm.pwd2 = ''
    dialogFormVisible.value = true
}
 
</script>

<template>
    <el-container class="container">


        <el-aside class="aside" :width="asideWidth">
            <router-link to="/" class="brand"><strong>知了<span v-show="!isCollapse">OA系统</span></strong></router-link>
            <el-menu :router="true" class="el-menu-vertical-demo" active-text-color="#ffd04b" text-color="#FFFFFF"
                background-color="#343a40" :default-active="defaultActive" :collapse="isCollapse"
                :collapse-transition="false">

                <template v-for="route in routes[0].children">

                    <template v-if="authStore.has_permission(route.meta.permissions, route.meta.opt)">

                        <!-- 单层级菜单 -->
                        <el-menu-item v-if="!route.children" index="route.name" :route="{ name: route.name }">
                            <el-icon>
                                <component :is="route.meta.icon"></component>
                            </el-icon>
                            <span>{{ route.meta.text }}</span>
                        </el-menu-item>


                        <!-- 多层级菜单 -->
                        <el-sub-menu v-else  :index="route.name">

                            <!-- 父菜单 -->
                            <template #title>
                                <el-icon>
                                    <component :is="route.meta.icon"></component>
                                </el-icon>
                                <span>{{ route.meta.text }}</span>
                            </template>

                            <!-- 子菜单 -->
                            <template v-for="subroute in route.children"  >
                                <!-- 非隐藏项 + 有权限，此时才进行展示 -->
                                <el-menu-item v-if="!subroute.meta.hidden && authStore.has_permission(subroute.meta.permissions, subroute.meta.opt)" :index="subroute.name"
                                    :route="{ name: subroute.name }">
                                    <el-icon>
                                        <component :is="subroute.meta.icon"></component>
                                    </el-icon>
                                    <span>{{ subroute.meta.text }}</span>
                                </el-menu-item>
                            </template>

                        </el-sub-menu>

                    </template>
                </template>

            </el-menu>
        </el-aside>

        <el-container>
            <el-header class="header">
                <div class="left-header">
                    <el-button v-show="isCollapse" :icon="Expand" @click="onCollapseAside" />
                    <el-button v-show="!isCollapse" :icon="Fold" @click="onCollapseAside" />
                </div>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <el-avatar :size="30" icon="UserFilled" />
                        <span style="margin-left: 10px;">[{{ displayUser.department.name}}]{{
                            displayUser.realname }}</span>
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="onControlResetPwdDialog">修改密码</el-dropdown-item>
                            <el-dropdown-item divided @click="onExit">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-main class="main">
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>

    <el-dialog v-model="dialogFormVisible" title="修改密码" width="500">
        <el-form :model="resetPwdForm" :rules="rules" ref='formTag'>
            <el-form-item label="旧密码" :label-width="formLabelWidth" prop='oldpwwd'>
                <el-input v-model="resetPwdForm.oldpwwd" autocomplete="off" type="password" />
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth" prop="pwd1">
                <el-input v-model="resetPwdForm.pwd1" autocomplete="off" type="password" />
            </el-form-item>
            <el-form-item label="确认新密码" :label-width="formLabelWidth" prop="pwd2">
                <el-input v-model="resetPwdForm.pwd2" autocomplete="off" type="password" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="onSubmit">
                    Confirm
                </el-button>
            </div>
        </template>

    </el-dialog>
</template>

<style scoped>

.container {
    height: 100vh;
    background-color: #f4f6f9;
}

.aside {
    background-color: #343a40;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22) !important;
}

.aside .brand {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #434a50;
    background-color: #232631;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.header {
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
}

.el-menu {
    border-right: none;
}
</style>